<template>
  <div class="dashboard-layout">
    <el-container>
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <el-menu
            :default-active="currentPath"
            :router="true"
            :collapse="isCollapse">
          <el-menu-item index="/ds/core">
            <el-icon>
              <i class="iconfont icon-hexinshujuguanli"></i>
            </el-icon>
            <template #title>核心数据</template>
          </el-menu-item>
          <el-menu-item index="/ds/retain">
            <el-icon>
              <i class="iconfont icon-shujuliucun"></i>
            </el-icon>
            <template #title>留存数据</template>
          </el-menu-item>
          <el-menu-item index="/ds/cash">
            <el-icon>
              <i class="iconfont icon-shouru"></i>
            </el-icon>
            <template #title>收入数据</template>
          </el-menu-item>
          <el-menu-item index="/ds/use">
            <el-icon>
              <i class="iconfont icon-chanpinshiyong"></i>
            </el-icon>
            <template #title>产品使用</template>
          </el-menu-item>
          <el-menu-item index="/ds/vip">
            <el-icon>
              <i class="iconfont icon-huiyuanshuju-xuanzhong"></i>
            </el-icon>
            <template #title>会员数据</template>
          </el-menu-item>
          <el-menu-item index="/ds/user">
            <el-icon>
              <i class="iconfont icon-a-mingchengyonghushuxingmingpian"></i>
            </el-icon>
            <template #title>用户属性</template>
          </el-menu-item>
          <el-menu-item index="/ds/channel">
            <el-icon>
              <i class="iconfont icon-hezuoqudao"></i>
            </el-icon>
            <template #title>渠道</template>
          </el-menu-item>
        </el-menu>
        <i class="iconfont icon-youjiantou1 collapse-icon" v-if="isCollapse" @click="handleChangeCollapse"></i>
        <i class="iconfont icon-youjiantou1-copy collapse-icon" v-else @click="handleChangeCollapse"></i>
      </el-aside>
      <el-main>
        <router-view/>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import {ref, watch} from 'vue'
import {useRouter} from "vue-router";

const router = useRouter()
const currentPath = ref(router.currentRoute.value.path)
watch(() => router.currentRoute.value.path, (path) => {
  currentPath.value = path
})
const isCollapse = ref(false)
const handleChangeCollapse = () => {
  isCollapse.value = !isCollapse.value
}
</script>

<style scoped lang="scss">
  .dashboard-layout{
    position: relative;
    width: 100%;
    height: 100%;
  }
  .el-container{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: transparent;
  }
  .el-aside{
    position: relative;
    //background: rgb(60 64 73);
  }
  .el-menu{
    height: 100%;
    border-right: none;
    //background: none;
    background: rgb(60 64 73);
    .iconfont{
      font-size: 24px;
    }
  }
  .collapse-icon{
    cursor: pointer;
    font-size: 20px;
    position: absolute;
    right: 20px;
    bottom: 20px;
    color: #fff;
  }
  .el-menu-item{
    color: #fff;
    &:hover{
      background-color: rgb(56 159 238);
    }
    &.is-active{
      color: #fff;
      background-color: rgb(56 159 238);
    }
  }
</style>
